<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">房屋巡查记录</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">房屋信息</div>
            <div class="detailcontent">
                <div class="detailitem">区属名称：{{ projectdetail.qs }}</div>
                <div class="detailitem">房屋地址：{{ projectdetail.fwdz }}</div>
                <div class="detailitem">产别：{{ projectdetail.cb }}</div>
                <div class="detailitem">权证类型：{{ projectdetail.qzlx }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                <div class="detailitem">证书编号：{{ projectdetail.zsbh }}</div>
                <div class="detailitem">土地使用权面积：{{ projectdetail.tdsyqmj }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.zsbh }}</div>
                <!-- <div class="detailitem">发证日期：{{ projectdetail.fzrq ? projectdetail.fzrq.split(' ')[0] : '' }}</div> -->
                <!-- <div class="detailitem">土地使用权类型：{{ projectdetail.tdsyqlx }}</div>
                <div class="detailitem">总楼层：{{ projectdetail.zlc }}</div>
                <div class="detailitem">地上层数：{{ projectdetail.dscs }}</div>
                <div class="detailitem">地下层数：{{ projectdetail.dxcs }}</div>
                <div class="detailitem">风貌建筑：{{ projectdetail.fmjz }}</div>
                <div class="detailitem">小洋楼招商：{{ projectdetail.zsxyl }}</div>
                <div class="detailitem">建筑形式：{{ projectdetail.jzxs }}</div>
                <div class="detailitem">原值：{{ projectdetail.yz }}</div>
                <div class="detailitem">建档日期：{{ projectdetail.jdrq ? projectdetail.jdrq.split(' ')[0] : '' }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem">档案编号：{{ projectdetail.dabh }}</div>
                <div class="detailitem">房屋结构：{{ projectdetail.fwjg }}</div> -->
            </div>
            <div class="addtitle">巡查列表</div>
            <div style="overflow: hidden;;margin-bottom:16px">
                <el-table :data="tableData" style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-style="tablerowColor" border>
                    <el-table-column prop="xcsj" label="巡查时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.xcsj ? scope.row.xcsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="xcjg" label="巡查结果" align="center"> </el-table-column>
                    <el-table-column prop="xcr" label="巡查人" align="center"> </el-table-column>
                    <el-table-column prop="xcjl" label="记录" align="center"> </el-table-column>
                    <el-table-column prop="xcnr" label="巡查内容" align="center"> </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                    <!-- <el-table-column prop="fj" label="附件" align="center"> </el-table-column> -->
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="getdetail(scope.row.id)">详情</el-button>
                            <el-button type="text" size="small" @click="deleteClick(scope.row.id)"
                                style="color: red">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination background layout="total,prev, pager, next,jumper" :total="total" :current-page.sync="current"
                        :page-size="pageSize" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <div class="addtitle">新增巡查记录</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top">
                <el-form-item label="巡查时间:" style="width: 30%" prop="xcsj">
                    <el-date-picker type="date" placeholder="选择巡查时间" v-model="form.xcsj" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="巡查结果:" style="width: 30%" prop="xcjg">
                    <el-select v-model="form.xcjg" placeholder="请选择巡查结果" style="width: 100%;">
                        <el-option v-for="item in xcjglist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="巡查人:" style="width: 30%" prop="xcr">
                    <el-input v-model="form.xcr" placeholder="请输入巡查人" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="巡查内容:" style="width: 100%" prop="xcnr">
                    <el-checkbox-group v-model="xcnr">
                        <el-checkbox label="结构"></el-checkbox>
                        <el-checkbox label="外檐"></el-checkbox>
                        <el-checkbox label="燃气"></el-checkbox>
                        <el-checkbox label="用水"></el-checkbox>
                        <el-checkbox label="电气"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="巡查记录:" style="width: 100%" prop="xcjl">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入巡查记录" v-model="form.xcjl"
                        style="width: 100%;">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注:" style="width: 100%" prop="bz">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="form.bz"
                        style="width: 100%;">
                    </el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
            <div style="margin: 14px auto;width:200px">
                <el-button type="primary" @click="submitval">保存</el-button>
                <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
            </div>
        </div>
        <el-dialog title="巡查详情" :visible.sync="xcdetailshow" :modal-append-to-body="false" width="60%">
            <div class="detailcontent">
                <div class="detailitem">巡查时间：{{ xcdetail.xcsj ? xcdetail.xcsj.split(' ')[0] : '' }}</div>
                <div class="detailitem">巡查结果：{{ xcdetail.xcjg }}</div>
                <div class="detailitem">巡查人：{{ xcdetail.xcr }}</div>
                <div class="detailitem">记录：{{ xcdetail.xcjl }}</div>
                <div class="detailitem">巡查内容：{{ xcdetail.xcnr }}</div>
                <div class="detailitem">备注：{{ xcdetail.bz }}</div>
            </div>
            <div style="display:flex;margin-top: 20px;">
                <div style=" text-align: center;margin-right:10px;cursor: pointer;width: 100px;"
                    v-for="(item, index) in xcdetail.fj" :key="index" class="filebox">
                    <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px;"
                        @click="downloadfile(item.id, item.name, item.suffix)">
                    <div class="fileboxitem">{{ item.name }}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { builddetail, download, xclist, xcadd, xcdetails, xcdelete } from '@/api/index';
import fileType from "../vo/filetype";
import valueList from '@/components/common/valueList.vue'
import global from '@/components/common/httpurl.vue'

export default {
    name: 'xcdetail',
    data() {
        return {
            xcdetailshow: false,
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            xcjglist: valueList.xcjglist,
            form: {},
            projectdetail: {},
            fileList: [],
            filefileList: [],//文件列表
            fileType: fileType,
            httpUrl: global.httpUrl,//公共地址
            tableData: [],
            total: 0,
            current: 1,
            pageSize: 10,
            xcnr: [],
            // 巡查列表参数
            xcform: {
                buildid: '',
                current: 1,
                pageSize: 10
            },
            buildid: '',
            xcdetail: {}
        };
    },
    methods: {
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f7f7;color:black;height: 54px;font-weight: 500;font-size:14px;font-variant:tabular-nums'
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;'
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.form.current = val;
            this.xclist(this.xcform);
            console.log(val);
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
        // 巡查详情
        xcdetails(data) {
            xcdetails(data).then((res) => {
                this.xcdetail = res.data;
            });
        },
        // 巡查列表
        xclist(data) {
            xclist(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total
                } else {
                    this.tableData = [];
                    this.total = 0;
                }
            })
        },
        // 巡查新增
        xcadd(data) {
            xcadd(data).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.current = 1;
                    this.form.current = 1;
                    this.xclist(this.xcform);
                    this.form = {
                        buildid: this.buildid
                    }
                    this.filefileList = []
                    this.xcnr = []
                }
            });
        },
        // 保存
        submitval() {
            this.form.xcnr = this.xcnr.toString()
            this.xcadd(this.form)
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form.fj = this.fileListshandle.toString()
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form.fj = this.fileListshandle.toString()
        },
        // 巡查详情
        getdetail(e) {
            this.xcdetailshow = true
            let data = {
                id: e
            }
            this.xcdetails(data)
        },
        // 删除
        deleteClick(e) {
            console.log(e);
            this.$confirm('确定删除此条信息吗？')
                .then(() => {
                    let data = { id: e };
                    xcdelete(data).then((res) => {
                        if (res.code == 200) {
                            this.xclist(this.xcform);
                            this.$message.success('删除成功');
                        }
                    });
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
    },
    mounted() {
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
        this.xcform.buildid = this.$route.params.id
        this.form.buildid = this.$route.params.id
        this.buildid = this.$route.params.id
        this.xclist(this.xcform)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

.detailcontent .detailitem2 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>